<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>oh 是我的主页</title>
</head>
<body>
    <div>
        <h1>Welcome to my home page</h1>
    </div>

    <div class="c"><h4> Hello!</h4></div>

    <hr style="height:2px;border:none;border-top:2px solid #85c9f1;" />
    
    <h2 class="topnav">
        <a href="#自我介绍">自我介绍</a>
        <a href="#学习阶段">学习阶段</a>
    </h2>
    <br>
    <br>
    <div>
        <div>
            <h3>我的基本信息</h3>
            <ul>
                <li>姓名:
                    <input type="text" name="cname" value="邱彩慧">
                </li>
                <li>性别:
                    <label for="male" >
                    <input type="radio" name="gender" id="male">男</label>
                    <label for="famale">
                    <input type="radio" name="gender" checked id="famale">女</label>
                </li>
                <li>出生年月日:
                    <input type="date" name="birthday" value="2003-10-31">
                </li>
                <li>手机:
                    <input type="tel" name="phone" value="133********75">
                </li>
                <li>邮箱:
                    <input type="email" name="e-mail" value="225*****57@qq.com">
                </li>
                </li>
                <li>出生地:
                    <input type="text" name="place" value="广东省惠州市">
                </li>
            </ul>
        </div>
        <div>
            <h3>自述</h3>
            <p>我是一个比较慢热的人，也太不勇敢，但熟了比较开朗活泼，也比较的乐观。兴趣爱好广泛，但会不会可能就是
            又是另一回事了，平常喜欢追剧追综艺、刷视频，还喜欢和好朋友们出去逛吃逛吃。</p>

            <h3>我的家乡</h3>
            <div class="row"></div>
            <div class="column">
                <h2>惠州</h2>
                <p>惠州市的自然地理条件得天独厚，素有“粤东重镇”、“岭南名郡”之誉。市区及各县人文景观和自然景观甚多，
                    集湖、海、山、泉、瀑布之大全。惠州西湖风景秀丽，古人有云：“中国西湖三十六，唯惠州足并杭州”。
                    惠州是粤东的一座历史名城，有着独特的地理位置和优美的自然环境。该市属亚热带季风气候。
                    北回归线从该市博罗县的杨村和龙门县的南昆山穿越。境内北部多山地，中部、西部和沿江地带多冲积平原，
                    东部和南部为丘陵、台地。境内雨量充沛，阳光充足，气候温和，年平均降雨量1700毫米，年日照总数2000多小时，
                    年平均气温22度，7月均温28.3度，1月均温13度。四季长青，全年无霜期达350天左右。</p>
            </div>
              
            <div class="column">
                <h2>罗浮山</h2>
                <p>其中，著名的景点之一罗浮山，雄峙于岭南中南部，坐临南海大亚湾，毗邻惠州西湖。罗浮山方圆214多平方公里，
                    共有大小山峰432座，飞瀑名泉多达980多处，洞天奇景18处，石室幽岩72个，以山势雄伟壮观，植被繁茂常绿，
                    林木高大森古，神仙洞府超凡脱俗的特色吸引古今无数的名仙名人和游客。历代诗人陆贾、谢灵运、李白、杜甫、
                    李贺、刘禹锡、韩愈、柳宗元、苏轼、杨万里、汤显祖、屈大钧等都留下经典的文赋和诗咏。罗浮山的“师雄梦梅”、
                    “东坡啖荔”、 “安期天饮”、“稚川炼丹”、“仙凡路别”、“花手游会”、“洞天药市”、“天龙王梦”等不少的传说，
                    神奇幽胜，风流华夏</p>
            </div>
            <img src="./img/家乡.jpg" alt="" width=470px" height="300px">
            <img src="./img/家乡3.jpg" alt="" width="470px" height="300px">
        </div>
        <br>
        <br>
        <br>
        <div>
            <h2 class="b"><a name="学习阶段"></a>学习阶段</h2>
            <h3>学习经历</h3>
            <div>
                <p>
                    我高中毕业于博罗县华侨中学，现就读于广东省顺德职业技术学院，是一名即将大二的学生。三年的高中生
                    活,使我增长了知识,也培养了我各方面的能力,为日后我成为社会主义现代化建设的接班人打下了坚实的
                    基础。通过三年的学习,我也发现了自己的不足,所以现在在大学期间，我还需要努力改掉不足的地方，成为
                    更好的自己。大一快结束了，在这一年来感受到了大学并不像高中老师说的那样轻松，反而更多的是迷茫，
                    也总结到了：书该看时就要看，不然等到期末周真的很痛苦。
                </p>
                <img src="./img/高中.jpg" alt="" width=470px" height="300px">
                <img src="./img/大学1.jpg" alt="" width=470px" height="300px">
                <img src="./img/大学.jpg" alt="" width=470px" height="300px">
            </div>
            <div>
                <h3>上学期成绩单</h3>
                <table border="1" cellspacing="0">
                    <tr>
                        <th>科目</th>
                        <td>分数</td>
                        <th>科目</th>
                        <td>分数</td>
                    </tr>
                    <tr>
                        <th>形势与政策</th>
                        <td>100</td>
                        <th>应用数学</th>
                        <td>100</td>
                    </tr>
                    <tr>
                        <th>毛概</th>
                        <td>99</td>
                        <th>思政</th>
                        <td>95</td>
                    </tr>
                    <tr>
                        <th>马克思</th>
                        <td>99</td>
                        <th>英语</th>
                        <td>91</td>
                    </tr>
                    <tr>
                        <th>计算机</th>
                        <td>87</td>
                        <th>多媒体</th>
                        <td>85</td>
                    </tr>
                    <tr>
                        <th>体育</th>
                        <td>69</td>
                        <th>劳动教育</th>
                        <td>B</td>
                    </tr>
                    <tr>
                        <th>职业生涯规划</th>
                        <td>A</td>
                        <th>军事</th>
                        <td>B</td>
                    </tr>
                </table>
              
                <h3>本学期任务</h3>
                <ul>
                    <li>制作了一张简单的有声相册网页
                        <div>
                            <a href="./有声相册/首页结构.html">有声相册</a>
                        </div>
                    </li>
                    <!-- <li>为朋友生日制作了一张简单的生日网页<br>
                        <img src="./img/朋友生日.jpg" alt="专属网页" width="250px" height="150px">
                    </li> -->
                    <li>
                        <a href="./CSS选择器/选择器.html">CSS选择器</a>
                    </li>
                    <li>
                        <a href="./盒子模型/盒子.html">盒子模型</a>
                    </li>
                    <li>
                        <a href="./格式化文本/格式化文本.html">格式化文本</a>
                    </li>
                    <li>
                        <a href="./设置颜色和背景/设置颜色和背景.html">颜色和背景</a>
                    </li>
                    <li>
                        <a href="./制作奖状/奖状.html">制作奖状</a>
                    </li>
                    <li>
                        <a href="./键盘焦点和鼠标悬停/键盘焦点效果.html">键盘悬停效果</a>
                        <a href="./键盘焦点和鼠标悬停/鼠标悬停效果.html">鼠标悬停效果</a>
                    </li>
                    <li>
                        <a href="./探究浮动及其应用/探究浮动.html">探究浮动</a>
                        <a href="./探究浮动及其应用/浮动应用于列表排列.html">列表排列</a>
                        <a href="./探究浮动及其应用/浮动应用于居左居右.html">居左居右</a>
                        <a href="./探究浮动及其应用/display改变显示类型.html">display改变显示类型</a>
                    </li>
                    <li>
                        <a href="./探究定位及其应用/促销/促销图示.html">促销图示</a>
                        <a href="./探究定位及其应用/仿美的官网菜单/仿美的官网菜单.html">仿美的官网菜单</a>
                        <a href="./探究定位及其应用/bilibili鼠标悬停动效/bilibili悬停特效.html">bilibili悬停特效</a>
                    </li>
                    <li>
                        <a href="./实现动感立方体/2D转换.html">2D转换</a>
                        <a href="./实现动感立方体/动画.html">动画</a>
                        <a href="./实现动感立方体/立方体效果与制作.html">立方体效果与制作</a>
                    </li>
                    <li>
                        <a href="./探究布局/多列布局.html">多列布局</a>
                        <a href="./探究布局/chat/list.html">chat界面</a>
                        <a href="./探究布局/wechat/index.html">Wechat聊天界面</a>
                    </li>
                    <li>
                        <a href="./探究布局2/布局概述.html">布局概述</a>
                        <a href="./探究布局2/模拟.html">模拟</a>
                    </li>
                </ul>
            </div>
        </div>
        <br>
        <br>
        <br>
        <div class="footer">
            <h2>感谢你的查阅，留个赞吧~</h2>
        </div>
</body>
<style>
    body{
        background-color: #f9edf5;
    }

    h1{
        text-align: center;
        color: #85c9f1;
    }

    h2{
        display: inline; 
    }

    .topnav {
        overflow: hidden;
        background-color: #333;
    }

    .topnav a {
        float: left;
        display: block;
        color: #c1e4f3;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .topnav a:hover {
        background-color: rgb(163, 230, 238);
        color: black;
    }

    a:visited{
        color: #f895d2;
        text-decoration: none;
    }

    p{
        text-indent: 2em;
        font-size: large;
    }

    .b{
        color: crimson;
    }

    h3{
        color: darkcyan;
    }
    
    .column {
        float: left;
        width: 50%;
        padding: 15px;
    }

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    .footer {
        background-color: #fbe5f3;
        padding: 10px;
        text-align: center;
    }   

    .c{
        text-align: center;
        width: 80px;
        height: 50px;
        line-height: 50px;
        background-color: rgb(78, 168, 78);
        position: relative;
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count: infinite;
        animation-direction: alternate; 
        
    }

    @keyframes example {
    0%   {background-color:forestgreen; left:0px; top:0px;}
    100%  {background-color:rgb(163, 230, 238); left:200px; top:0px;}
    }

</style>
</html>